<template>
  <div id="form">
    <!-- 筛选模块 -->
    <page-header
      @selectEmits="select"
      @drawerChangeEmits="drawerChange"
      @searchDateEmits="searchDate"
      @searchKeyEmits="searchKey"
      v-model:pagination="pagination"
    ></page-header>
    
    <!-- 表格内容 -->
    <page-table
      :tableData="tableData.value"
      :tableList="tableList"
      @handleEditEmit="handleEdit"
      @handleDeleteEmit="handleDelete"
      @switchChangeEmit="switchChange"
    ></page-table>

    <!-- 分页 -->
    <!-- <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.page"
      :page-sizes="[5, 10, 20, 50, 100]"
      :page-size="pagination.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total.value"
      class="form-pagination"
    >
    </el-pagination> -->
    <!-- 抽题 -->
    <page-drawer
      v-if="visibilityBinding"
      :visibilityBinding="visibilityBinding"
      :pagination="infos"
      :flag="flag"
      @handleCloseEmits="handleClose"
      @handleDrawerSubmitEmits="handleDrawerSubmit"
      @addDrawerSubmitEmits="addDrawerSubmit"
    ></page-drawer>
  </div>
</template>

<script setup>
import { tableList } from './cpns/table'
import pageDrawer from './cpns/page-drawer/index.vue'
import pageHeader from './cpns/page-header/index.vue'
import pageTable from './cpns/page-table/index.vue'
import { computed, reactive } from 'vue-demi'
import emitter from '@/utils/eventbus.js'

const visibilityBinding = ref(false)
const direction = ref('rtl')
const store = useStore()
const flag = ref(false)
const tableData = ref([])
const total = ref(null)
//获取文章列表
const pagination = reactive({})

const paginations = reactive({
  productName: '',
  productId: '',
  otherNames: '',
  CASNumber: '',
  molecularFormula: '',
  molecularWeight: '',
  specifications: '',
  appearance: '',
  benefits: '',
  dosage: '',
  bulkPackaging: '',
  desc: ''
})

// watch 监听数据
watch(pagination, () => siteArticleHook())

const siteArticleHook = () => {
  store.dispatch('product/getProductListAction', {})
  tableData.value = computed(() => store.state.product.productList)
  // total.value = 2
}
siteArticleHook()

//上架 下架
const switchChange = (val) => {
  store.dispatch('product/switchChangeActions', { ...val })
}

// 新增提交
const addDrawerSubmit = (info) => {
  console.log(info)
  flag.value = false
  store.dispatch('product/addSubmitActions', { ...info })
}

// 编辑提交
const handleDrawerSubmit = (info) => {
  store.dispatch('product/submitActions', { ...info })
}

// 搜索
const select = (page) => {
  //  调用搜索并获取列表
  paginations.category_id = page + ''
  store.dispatch('product/getArticleListAction', { ...paginations })
  tableData.value = computed(() => store.state.article.articleList)
  total.value = computed(() => store.state.article.articleTotal)
}

const searchDate = (page) => {
  console.log(page)
  //  调用搜索并获取列表
}

const searchKey = (page) => {
  // 调用搜索并获取列表
  store.dispatch('product/searchArticleActions', page)
}

// 分页
const handleSizeChange = (value) => {
  pagination.pageSize = value
}
// 页码切换
const handleCurrentChange = (value) => {
  pagination.page = value
}

const handleClose = (page) => {
  visibilityBinding.value = page
}

//点击修改
let infos = ref(null)

const handleEdit = (obj) => {
  infos.value = obj
  // vuex传递
  visibilityBinding.value = true
  emitter.emit('productContentChange', obj.desc)
  flag.value = true
}

// 点击新增
const drawerChange = (page) => {
  flag.value = false
  infos.value = paginations
  visibilityBinding.value = true
}

// 点击删除
const handleDelete = (page) => {
  store.dispatch('product/switchChangeActions', { ...page })
}
</script>

<style scoped>
#form {
  padding: 20px;
}

.head {
  margin: 20px 0;
}

.form-search {
  display: flex;
  align-content: center;
  justify-content: right;
}

.form-search-input {
  text-align: right;
  width: 200px;
}

.form-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 20px auto;
}

.edit {
  padding: 20px 0;
}

.form-drawer {
  padding: 20px;
}
</style>
